<template>
  <div class="container">
    <div id="map"></div>
    <el-button class="join-btn" @click="joinData" type="primary">join</el-button>
  </div>
</template>

<script>
import "mapbox-gl/dist/mapbox-gl.css";
import mapboxgl from "mapbox-gl";
import {
  genetorGeoJosn,
  drawCanvas,
  genetorData,
} from "../../src/utils/dataUtils";
export default {
  name: "Vue2MapboxMapTemplate ",
  data() {
    return {};
  },

  mounted() {
    this.initMap();

    this.joinData()
  },

  methods: {
    initMap() {
      mapboxgl.accessToken =
        "pk.eyJ1IjoiY3Vpaml5aW5nIiwiYSI6ImNsZ3QyZjY4ODAxbDEza3BkOTJqbTJvN3gifQ.Ldj9qAFzb5uzcLP-VtFB3A";
      this.map = new mapboxgl.Map({
        container: "map", 
        style: "mapbox://styles/cuijiying/cll09l2nz007w01picbmj3e1z", 
        center: [118.601604, 31.905137], 
        zoom: 6,
      });

      this.jsonData = genetorGeoJosn(
        {
          ymax: 41.072443,
          ymin: 25.905137,
          xmax: 121.601604,
          xmin: 100.495696,
        },
        2000
      );
      // load事件
      this.map.on("load", () => {
        drawCanvas().forEach((item) => {
          this.map.loadImage(item.imgUrl,  (error, image) => {
            if (error) throw error;
            !this.map.hasImage(item.id) && this.map.addImage(item.id, image);
          });
        });

        this.map.addSource("points", {
          type: "geojson",
          data: this.jsonData,
        });

        this.map.addLayer({
          id: "points",
          type: "symbol",
          source: "points",
          layout: {
            // "icon-image": "star",
            "icon-image": [
              "match",
              ["get", "type"], // 替换为您的属性字段名
              0,
              "rect", // 默认图标名称
              1,
              "tri", // 替换为范围1对应的图标名称
              2,
              "star", // 替换为范围2对应的图标名称
              "rect-red", // 默认图标名称
            ],
            "text-field": "{name}",
            "symbol-sort-key": ["get", "type"], // 设置 symbol-sort-key
            // 'symbol-z-order': 'source'
          },
          // filter: ["has", "point_count"],
          paint: {
          },
        });

        this.joinData()

      });

      this.map.on("click", "points", function (e) {
        // var coordinates = e.features[0].geometry.coordinates.slice();
        // var title = e.features[0].properties.id;
        var feature = e.features[0];
        var title = e.features[0].properties.type;
        console.log(feature, title);
      });



    },

    setStates() {
      // let datas = genetorData(2000);
      // for (const item of datas) {
      //   this.map.setFeatureState(
      //     {
      //       source: "points",
      //       id: item.id,
      //     },
      //     {
      //       value: item.value,
      //     }
      //   );
      // }

      // let features = this.map.querySourceFeatures('points')
        // let featuresRender = map.queryRenderedFeatures('points')

      

      let features = this.jsonData.features;

      console.log(features, 'fffffffffffffffffffff');

      let datas = genetorData(2000);

      features.forEach(item => {
        const dataProperties = datas.find(it => it.id == item.id)
        item.properties.type = dataProperties.type
      })

      console.log(features);

      this.map.getSource('points').setData({
        type: "FeatureCollection",
        features: features,
      })


    },

    setAfterLoad(event) {
      if (event.sourceID !== "points" && !event.isSourceLoaded) return;
      console.log(event.source.data, 'eeeeeeeeeee')
      // event.source.data.features.forEach(item=>{
      //   item.properties.joindd = 'aaaaaaaaaaaaaaaaaa'
      // })
      // this.map.getSource('points').setData(event.source.data)
      // this.setStates();
      console.log(this.jsonData, 'this.jsonData=========isSourceLoaded============');
      this.map.off("sourcedata", this.setAfterLoad);
    },

    joinData(){
      console.log('join====================');

      // let features = this.map.querySourceFeatures('points')
      // //   // let featuresRender = map.queryRenderedFeatures('points')

      //   console.log(features, 'fffffffffffffffffffff');

      // let datas = genetorGeoJosn(
      //   {
      //     ymax: 41.072443,
      //     ymin: 25.905137,
      //     xmax: 121.601604,
      //     xmin: 100.495696,
      //   },
      //   2000
      // );

      // this.jsonData.features.forEach(item => {
      //   const datafeature= datas.features.find(it => it.id == item.id);
      //   item.properties= datafeature.properties;
      //   // item.properties.type= datafeature.properties.type;
      // })

      // this.map.getSource('points').setData({
      //   type: "FeatureCollection",
      //   features: this.jsonData.features,
      // })

      // console.log(this.jsonData.features, 'this.jsonData.features===========================');


      // If `statesData` source is loaded, call `setStates()`.
      console.log(this.jsonData, 'this.jsonData=====================');
      if (this.map.isSourceLoaded("points")) {
        this.setStates();
      }
       else {
        this.map.on("sourcedata", this.setAfterLoad);
      }

    }
  },
};
</script>

<style>
.join-btn{
  position: absolute;
  top: 20px;
  left: 50px;
}
</style>
